<template>
  <div class="dashboard-container" v-if="this.roleName == '管理员'">
    <div class="dashboard-text">
      用户管理
    </div>
    <div style="margin-left: 400PX">
      <el-button type="primary" @click="addUserButton"
                 style="margin-left: 40px">新增
      </el-button>
      <el-input v-model="userIds" placeholder="用户ID"
                style="width: 200px;margin-left: 40px" clearable/>
      <el-input v-model="userNames" placeholder="用户名"
                style="width: 200px;margin-left: 40px" clearable/>
      <el-select v-model="roleNames" placeholder="角色"
                 style="width: 200px;margin-left: 40px" clearable>
        <el-option
          v-for="item in roleList"
          :key="item.id"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
      <el-button type="primary" @click="selectAll"
                 style="margin-left: 40px">查询
      </el-button>
      <el-button style="margin-left: 40px" @click="check">重置</el-button>
    </div>
    <div style="margin-top: 20px">
      <el-table :data="userList" height="659px" border style="width: 100%">
        <el-table-column align="center" fixed prop="userId" sortable label="用户ID"/>
        <el-table-column align="center" fixed prop="userName" sortable label="用户名称"/>
        <el-table-column align="center" fixed prop="roleName" sortable label="用户角色"/>
        <el-table-column align="center" fixed prop="userPassword" sortable label="用户密码"/>
        <el-table-column align="center" fixed prop="sex" sortable label="性别"/>
        <el-table-column align="center" fixed prop="phoneNumber" sortable label="电话号码"/>
        <el-table-column align="center" fixed prop="identificationCard" sortable label="身份证号"/>
        <el-table-column align="center" fixed prop="remark" sortable label="备注"/>
        <el-table-column align="center" fixed="right" label="操作">
          <template  v-slot="scope">
            <!--传入的scope.row参数为当前行的数据-->
            <el-button @click="updateUserButton(scope.row)" type="text" size="small">修改</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button v-if="scope.row.roleName !== '管理员'" @click="deleteUserButton(scope.row)" type="text"
                       size="small">删除</el-button>
            <el-button disabled v-else type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <!--新增弹窗-->
      <el-dialog title="新增员工" width="40%" :visible.sync="addUserButtonController" @close="closeUser('ruleForm')">
        <div style="margin: 10px">
          <el-form label-width="20%" :rules="userRoles" :model="addUserList" ref="ruleForm">
            <el-form-item label="用户名"  prop="userName">
              <el-input v-model="addUserList.userName" maxlength="20" show-word-limit style="width: 80%"
                        clearable placeholder="请输入用户名称"/>
            </el-form-item>
            <el-form-item label="密码"  prop="userPassword">
              <el-input v-model="addUserList.userPassword" maxlength="20" show-word-limit style="width: 80%"
                        clearable placeholder="请输入用户密码"/>
            </el-form-item>
            <el-form-item label="性别"  prop="sex">
              <el-input v-model="addUserList.sex" maxlength="1" show-word-limit style="width: 80%"
                        clearable placeholder="请输入性别"/>
            </el-form-item>
            <el-form-item label="电话"  prop="phoneNumber">
              <el-input v-model="addUserList.phoneNumber" maxlength="11" show-word-limit style="width: 80%"
                        clearable placeholder="请输入电话号码"/>
            </el-form-item>
            <el-form-item label="身份证"  prop="identificationCard">
              <el-input v-model="addUserList.identificationCard" maxlength="18" show-word-limit style="width: 80%"
                        clearable placeholder="请输入身份证号"/>
            </el-form-item>
            <el-form-item label="备注"  prop="remark">
              <el-input v-model="addUserList.remark" maxlength="20" show-word-limit style="width: 80%"
                        clearable placeholder="请输入备注"/>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addUser('ruleForm')">确定</el-button>
        <el-button @click="closeUser('ruleForm')">取消</el-button>
      </span>
      </el-dialog>

      <!--修改弹窗-->
      <el-dialog title="修改员工" width="40%" :visible.sync="updateUserButtonController" @close="closeUser('ruleForm')">
        <div style="margin: 10px">
          <el-form label-width="20%" :rules="userRoles" :model="updateUserList" ref="ruleForm">
            <el-form-item label="用户名"  prop="userName">
              <el-input v-model="updateUserList.userName" maxlength="20" show-word-limit style="width: 80%"
                        clearable placeholder="请输入用户名称"/>
            </el-form-item>
            <el-form-item label="密码"  prop="userPassword">
              <el-input v-model="updateUserList.userPassword" maxlength="20" show-word-limit style="width: 80%"
                        clearable placeholder="请输入用户密码"/>
            </el-form-item>
            <el-form-item label="性别"  prop="sex">
              <el-input v-model="updateUserList.sex" maxlength="1" show-word-limit style="width: 80%"
                        clearable placeholder="请输入性别"/>
            </el-form-item>
            <el-form-item label="电话"  prop="phoneNumber">
              <el-input v-model="updateUserList.phoneNumber"  maxlength="11" show-word-limit style="width: 80%"
                        clearable placeholder="请输入电话号码"/>
            </el-form-item>
            <el-form-item label="身份证"  prop="identificationCard">
              <el-input v-model="updateUserList.identificationCard" maxlength="18" show-word-limit style="width: 80%"
                        clearable placeholder="请输入身份证号"/>
            </el-form-item>
            <el-form-item label="备注"  prop="remark">
              <el-input v-model="updateUserList.remark" maxlength="20" show-word-limit style="width: 80%"
                        clearable placeholder="请输入备注"/>
            </el-form-item>

          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateUser('ruleForm')">确定</el-button>
        <el-button @click="closeUser('ruleForm')">取消</el-button>
      </span>
      </el-dialog>

      <!--删除弹窗-->
      <el-dialog title="删除员工" width="40%" :visible.sync="deleteUserButtonController">
        <div style="margin: 10px">
          <span>请确认是否删除该员工</span>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteUser">确定</el-button>
        <el-button @click="deleteUserButtonController = false">取消</el-button>
      </span>
      </el-dialog>
    </div>
  </div>
  <div class="dashboard-container" v-else>
    <div class="dashboard-text">
      无权访问
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { deleteByUserId, insertByUser, selectAllUser, updateByUser } from '@/api/user'

export default {
  name: 'Users',
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  // 页面参数
  data() {
    return {
      userId: this.$store.getters.userId,
      userName: this.$store.getters.userName,
      roleName: this.$store.getters.roleName,
      userIds: '',
      userNames: '',
      roleNames: '',
      roleList: [
        { id: 1, name: '管理员' },
        { id: 2, name: '员工' }
      ],
      userList: [],
      addUserButtonController: false,
      addUserList: {
        userName: '',
        userPassword: '',
        sex: '',
        phoneNumber: '',
        identificationCard: '',
        remark: ''
      },
      userRoles: {
        userName:[
          {required: true, trigger: 'blur', message: '用户名不能为空'},
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        userPassword:[
          {required: true, trigger: 'blur', message: '用户密码不能为空'},
          { min: 6, max: 20, message: '长度在 6 到 60 个字符', trigger: 'blur' }
        ],
        sex:[
          {required: true, trigger: 'blur',message: '性别不能为空'},
          { min: 1, max: 1, message: '性别只能是一位且必须是男或者女', trigger: 'blur' }
        ],
        phoneNumber:[
          {required: true, trigger: 'blur', message: '电话号码不能为空'},
          { min: 11, max: 11, message: '请输入合法的电话号码', trigger: 'blur' }
        ],
        identificationCard:[
          {required: true, trigger: 'blur', message: '身份证号不能为空'},
          { min: 18, max: 18, message: '请输入合法身份证号', trigger: 'blur' }
        ]
      },
      updateUserButtonController: false,
      updateUserList: {
        userTableId: '',
        userId: '',
        roleId: '',
        userName: '',
        userPassword: '',
        sex: '',
        phoneNumber: '',
        identificationCard: '',
        remark: ''
      },
      deleteUserButtonController:false,
      deleteUserId:'',
    }
  },
  // 页面初始化加载方法
  mounted() {
    this.selectAll()
  },
  // 页面内事件和方法
  methods: {
    selectAll() {
      selectAllUser({
        userId: this.userIds,
        userName: this.userNames,
        roleName: this.roleNames
      }).then(
        response => {
          this.userList = response.data
          console.log(this.userList)
        }
      )
    },
    check() {
      this.userIds = ''
      this.userNames = ''
      this.roleNames = ''
      this.selectAll()
    },
    addUserButton() {
      this.addUserList = {
        userName: '',
        userPassword: '',
        sex: '',
        phoneNumber: '',
        identificationCard: '',
        remark: ''
      }
      this.addUserButtonController = true
    },
    addUser(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          insertByUser({
            userName: this.addUserList.userName,
            userPassword: this.addUserList.userPassword,
            sex: this.addUserList.sex,
            phoneNumber: this.addUserList.phoneNumber,
            identificationCard: this.addUserList.identificationCard,
            remark: this.addUserList.remark
          }).then(
            async response => {
              this.selectAll()
              this.addUserButtonController = false
            }
          )
        } else {
          return false;
        }
      });
    },
    closeUser(formName){
      this.$refs[formName].resetFields();
      this.addUserButtonController =false
      this.updateUserButtonController = false
    },
    updateUserButton(row) {
      this.updateUserList = {
        userTableId: row.userTableId,
        userId: row.userId,
        roleId: row.roleId,
        userName: row.userName,
        userPassword: row.userPassword,
        sex: row.sex,
        phoneNumber: row.phoneNumber,
        identificationCard: row.identificationCard,
        remark: row.remark
      }
      this.updateUserButtonController = true
    },
    updateUser(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateByUser({
            userTableId: this.updateUserList.userTableId,
            userId: this.updateUserList.userId,
            roleId: this.updateUserList.roleId,
            userName: this.updateUserList.userName,
            userPassword: this.updateUserList.userPassword,
            sex: this.updateUserList.sex,
            phoneNumber: this.updateUserList.phoneNumber,
            identificationCard: this.updateUserList.identificationCard,
            remark: this.updateUserList.remark,
          }).then(
            async response => {
              this.selectAll()
              this.updateUserButtonController = false
            }
          )
        } else {
          return false;
        }
      });
    },
    deleteUserButton(row){
      this.deleteUserId = row.userId
      this.deleteUserButtonController = true
    },
    deleteUser() {
      deleteByUserId({
        userId: this.deleteUserId,
      }).then(
        async response => {
          this.selectAll()
          this.deleteUserButtonController = false
        }
      )
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
